<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-width="auto"
      v-show="showSearch"
    >
      <el-row>
        <el-form-item label="生产单编号" prop="produceNo">
          <el-input
            v-model.trim="queryParams.produceNo"
            style="width: 180px"
            placeholder="请输入生产单编号"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="机台" prop="machineName">
          <el-input
            v-model.trim="queryParams.machineName"
            style="width: 180px"
            placeholder="请输入机台"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="机台编码" prop="machineNo">
          <el-input
            v-model.trim="queryParams.machineNo"
            style="width: 180px"
            placeholder="请输入机台编码"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="车间" prop="workshopName">
          <el-select style="width: 180px" v-model="queryParams.workshopName">
            <el-option label="一车间" value="一车间"></el-option>
            <el-option label="二车间" value="二车间"></el-option>
            <el-option label="三车间" value="三车间"></el-option>
            <el-option label="四车间" value="四车间"></el-option>
            <el-option label="五车间" value="五车间"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" style="width: 308px">
          <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="完成状态" prop="machineState">
          <el-select style="width: 180px" v-model="queryParams.machineState">
            <el-option label="未完工" value="1"></el-option>
            <el-option label="已完成" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺" prop="machineType">
          <el-select style="width: 180px" v-model="queryParams.machineType">
            <el-option label="印刷机" value="2"></el-option>
            <el-option label="折页机" value="4"></el-option>
            <el-option label="裁切机" value="5,6"></el-option>
            <el-option label="装订机" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <!-- <div class="operation">
                    <el-button @click="advanced = !advanced">
                        <a style="color: #448ef7">
                            <el-icon v-if="advanced">
                                <ArrowUpBold />
                            </el-icon>
                            <el-icon v-else>
                                <ArrowDownBold />
                            </el-icon>
                        </a>
                    </el-button>
                    <right-toolbar
                        style="margin-left: 10px"
                        :search="false"
                        v-model:showSearch="showSearch"
                        @queryTable="getList"
                        :columns="columns"
                    ></right-toolbar>
                </div> -->
      </el-row>
      <!-- <el-row v-if="advanced">
                <el-form-item label="书刊名称" prop="bookName">
                    <el-input
                        v-model.trim="queryParams.bookName"
                        style="width: 180px"
                        placeholder="请输入书刊名称"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="书刊编码" prop="bookNo">
                    <el-input
                        v-model.trim="queryParams.bookNo"
                        style="width: 180px"
                        placeholder="请输入书刊编码"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="版材尺寸" prop="sheetSize">
                    <el-select
                        clearable
                        style="width: 100%"
                        v-model="queryParams.sheetSize"
                        placeholder="请选择版材尺寸"
                    >
                        <el-option
                            v-for="item in ems_machine_info_size"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-row> -->
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button
        type="primary"
        :disabled="multiple"
        plain
        icon="Printer"
        @click="handlePrintList"
        >打印</el-button
      >
      <!-- <el-col :span="1.5">
              <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
          </el-col> -->
    </el-row>
    <div>
      <el-table
        height="65vh"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        border
        :summary-method="getSummaries"
        show-summary
        :data="dataList"
      >
        <el-table-column type="selection" align="center" width="40" />
        <el-table-column label="序号" width="60" type="index" align="center" />
        <el-table-column
          label="状态"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
          prop="status"
          v-if="columns[0].visible"
        >
          <template v-slot="{ row }">
            <el-tag :type="row.status == 1 ? 'danger' : ''" effect="dark">
              {{ row.status == 1 ? "停用" : "启用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="生产单编号"
          min-width="160"
          align="center"
          prop="produceNo"
          v-if="columns[3].visible"
        ></el-table-column>
        <el-table-column
          label="机台"
          min-width="160"
          align="center"
          prop="machineName"
          v-if="columns[3].visible"
        ></el-table-column>
        <el-table-column
          label="机台编码"
          min-width="160"
          align="center"
          prop="machineNo"
          v-if="columns[3].visible"
        ></el-table-column>
        <el-table-column
          label="已分配任务量"
          v-if="columns[5].visible"
          width="120"
          align="center"
          prop="printAmount"
        ></el-table-column>
        <el-table-column
          label="已完成任务量"
          v-if="columns[6].visible"
          width="120"
          align="center"
          prop="total"
        ></el-table-column>
        <el-table-column
          label="未完成量"
          v-if="columns[7].visible"
          width="120"
          align="center"
          prop="wtotal"
        ></el-table-column>
        <el-table-column
          label="品种"
          v-if="columns[7].visible"
          width="120"
          align="center"
          prop="breed"
        ></el-table-column>
        <el-table-column
          label="类型"
          min-width="150"
          align="center"
          prop="type"
          v-if="columns[1].visible"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_machine_info_type"
              :value="scope.row.type"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="机型"
          width="150"
          align="center"
          prop="model"
          v-if="columns[2].visible"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_machine_info_model"
              :value="scope.row.model"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="车间"
          width="150"
          align="center"
          prop="workshopName"
          v-if="columns[4].visible"
        ></el-table-column>
        <el-table-column
          label="贴标"
          width="120"
          v-if="columns[11].visible"
          prop="pieceview"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          label="生产单编码"
          v-if="columns[8].visible"
          align="center"
          width="120"
          prop="produceNo"
        ></el-table-column> -->
        <el-table-column
          label="生产单状态"
          v-if="columns[9].visible"
          prop="produceStatus"
          min-width="160"
          align="center"
        >
          <template #default="scope">
            <dict-tag
              :options="ems_order_status"
              :value="scope.row.produceStatus"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="印刷序列号"
          min-width="160"
          v-if="columns[10].visible"
          prop="producePieceNo"
          align="center"
        ></el-table-column>
        <el-table-column
          label="预计交货日期"
          width="120"
          v-if="columns[12].visible"
          prop="expectTime"
          align="center"
        ></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <printView
      :visible="printOpen"
      :printList="printList"
      @cancel="
        () => {
          printOpen = false;
          printList = [];
        }
      "
    ></printView>
  </div>
</template>

<script setup>
import { getMachineTask } from "@/api/production/cover.js";
import printView from "@/components/PrintView";

const { proxy } = getCurrentInstance();
const loading = ref(true);
const dataList = ref([]);
const showSearch = ref(true);
const router = useRouter();
const total = ref(0);
const advanced = ref(false);
const printAmountSum = ref(0);
const totalSum = ref(0);
const multiple = ref(true);
const selectRow = ref([]);
const printOpen = ref(false);
const printList = ref([]);
// 列显隐信息
const columns = ref([
  { key: 0, label: `状态`, visible: true },
  { key: 1, label: `新/旧版`, visible: true },
  { key: 2, label: `制版日期`, visible: true },
  { key: 3, label: `制版编码`, visible: true },
  { key: 4, label: `生产单编码`, visible: true },
  { key: 5, label: `出版编码`, visible: true },
  { key: 6, label: `书刊编码`, visible: true },
  { key: 7, label: `书刊名称`, visible: true },
  { key: 8, label: `印刷序列号`, visible: true },
  { key: 9, label: `品种`, visible: true },
  { key: 10, label: `组成`, visible: true },
  { key: 11, label: `印张`, visible: true },
  { key: 12, label: `印数`, visible: true },
  { key: 13, label: `印色`, visible: true },
  { key: 14, label: `版材数量`, visible: true },
  { key: 15, label: `制版数量`, visible: true },
  { key: 16, label: `版材尺寸`, visible: true },
  { key: 17, label: `制版人`, visible: true },
  { key: 18, label: `烤版人`, visible: true },
  { key: 19, label: `完成日期`, visible: true },
  { key: 20, label: `取版人`, visible: true },
  { key: 21, label: `取版日期`, visible: true },
  { key: 22, label: `备注`, visible: true },
]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 50,
    machineState: "1",
  },
});

const getDateNow = () => {
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
  var day = myDate.getDate(); //获取当前日（1-31）
  if (month < 10) {
    month = "0" + month;
  }
  if (day >= 0 && day <= 9) {
    day = "0" + day;
  }
  var firstDay = year + "-" + month + "-01";
  return firstDay;
};
const handleSelectionChange = (row) => {
  selectRow.value = row;
  multiple.value = !row.length;
};
// 多选打印
const handlePrintList = () => {
  printOpen.value = true;
  printList.value = selectRow.value;
};
const getCurrentDay = () => {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1; // 月份从0开始，需要加1
  var day = now.getDate();
  if (month < 10) {
    month = "0" + month;
  }
  if (day >= 0 && day <= 9) {
    day = "0" + day;
  }
  const currentDay = year + "-" + month + "-" + day;
  return currentDay;
};
const dateRange = ref([getDateNow(), getCurrentDay()]);
const { queryParams } = toRefs(data);
const { ems_machine_info_type, ems_machine_info_model, ems_order_status } =
  proxy.useDict(
    "ems_machine_info_type",
    "ems_order_status",
    "ems_machine_info_model"
  );

const getList = () => {
  loading.value = true;
  getMachineTask({
    ...queryParams.value,
    startDate: Array.isArray(dateRange.value) ? dateRange.value[0] : undefined,
    endDate:
      Array.isArray(dateRange.value) > 0 ? dateRange.value[1] : undefined,
  })
    .then((res) => {
      loading.value = false;
      res.rows.forEach((val, index) => {
        if (val.userName != null) {
          val.machineName = val.machineName + "/" + val.userName;
        }

        //未完成量=已分配任务量-已完成任务量
        val.wtotal = Number(val.printAmount || 0) - Number(val.total || 0);
      });
      dataList.value = res.rows;
      if (res.rows.length > 0) {
        printAmountSum.value = res.rows[0].printAmountSum;
        totalSum.value = res.rows[0].totalSum;
      }
      total.value = res.total;
    })
    .catch((err) => {
      loading.value = false;
    });
};
// 合计
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 1) {
      sums[index] = "合计";
      return;
    }
    switch (column.property) {
      case "printAmount":
        sums[index] = `${printAmountSum.value}  令`;
        break;
      case "wtotal":
        sums[index] = `${
          Number(printAmountSum.value) - Number(totalSum.value)
        } 令`;
        break;
      default:
        break;
    }
  });
  return sums;
};
// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  dateRange.value = [getDateNow(), getCurrentDay()];
  proxy.resetForm("queryRef");
  handleQuery();
};

const handleViewCode = (row) => {
  router.push({
    path: "/production/platemaking/platemakingDetails",
    query: {
      id: row.platemakingId,
      info: true,
    },
  });
};

getList();
// router.beforeEach((to, from, next) => {
//     if (to.path == "/basicInfo/personnel") {
//         getList()
//     }
//     next();
// });
</script>

<style lang="scss" scoped>
.operation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 18px;
}
</style>
